var tl;
var win;

function createTimeline() {
   // Example of custom event handler for clicking on event
   // Disable caching till I can figure out what to do with _dc, contact couchdb guys
   
   Timeline.OriginalEventPainter.prototype._showBubble = function(x, y, evt) {
		//alert (evt.getProperty("title"));
		//alert (evt.getDescription());
		//alert (evt.getLink());

		document.location.href=evt.getLink();

        /*
        if(!win){
            win = new Ext.Window({
                applyTo     : 'hello-win',
                layout      : 'fit',
                width       : 500,
                height      : 300,
                closeAction :'hide',
                plain       : true,
                items       : //[{
                    //title:evt.getProperty("title"),
                    //html:'<img src="'+evt.getLink()+'"/>',
                    //width:800,
                    //anchor:'right 20%'
                    //}] 
                 new Ext.TabPanel({
                    applyTo        : 'hello-tabs',
                    autoTabs       : true,
                    activeTab      : 0,
                    deferredRender : false,
                    border         : false
                }),
                buttons: [{
                    text     : 'Submit',
                    disabled : true
                },{
                    text     : 'Close',
                    handler  : function(){
                        win.hide();
                    }
                }]
            });
        }
        
        win.show();
        */
    };

    var eventSource = new Timeline.DefaultEventSource();

    var zones = [
        {   start:    "Fri April 22 2009 00:00:00 GMT-0600",
            end:      "Mon April 23 2009 23:59:59 GMT-0600",
            magnify:  4,
            unit:     Timeline.DateTime.DAY
        },
        {   start:    "Fri April 22 2009 00:00:00 GMT-0600",
            end:      "Sun April 23 2009 23:59:59 GMT-0600",
            magnify:  2,
            unit:     Timeline.DateTime.HOUR
        },
        {   start:    "Fri April 22 2009 00:00:00 GMT-0600",
            end:      "Sat April 23 2009 23:59:59 GMT-0600",
            magnify:  2,
            unit:     Timeline.DateTime.MINUTE,
            multiple: 60
        }/*,
        {   start:    "Fri April 24 2009 00:00:00 GMT-0600",
            end:      "Fri October 22 2010 00:00:00 GMT-0600",
            magnify:  1,
            unit:     Timeline.DateTime.MONTH,
            multiple: 1
        }*/
    ];

    var zones2 = [
        {   start:    "Fri April 22 2009 00:00:00 GMT-0600",
            end:      "Mon April 23 2009 23:59:59 GMT-0600",
            magnify:  2,
            unit:     Timeline.DateTime.WEEK
        },
        {   start:    "Fri April 22 2009 00:00:00 GMT-0600",
            end:      "Sun April 23 2009 23:59:59 GMT-0600",
            magnify:  1,
            unit:     Timeline.DateTime.DAY
        },
        {   start:    "Fri April 22 2009 00:00:00 GMT-0600",
            end:      "Sat April 23 2009 23:59:59 GMT-0600",
            magnify:  1,
            unit:     Timeline.DateTime.HOUR//,
            //multiple: 10
        }/*,
        {   start:    "Fri April 24 2009 00:00:00 GMT-0600",
            end:      "Fri October 22 2010 00:00:00 GMT-0600",
            magnify:  1,
            unit:     Timeline.DateTime.MONTH,
            multiple: 1
        }*/
    ];
    
    var theme = Timeline.ClassicTheme.create();
    theme.event.bubble.width = 250;
    
    var date = "Fri April 22 2009 13:00:00 GMT-0600"
    var bandInfos = [
		// top band
        Timeline.createHotZoneBandInfo({
            width:          "90%", 
            intervalUnit:   Timeline.DateTime.WEEK, 
            intervalPixels: 300,
            zones:          zones,
            eventSource:    eventSource,
            date:           date,
            timeZone:       -6,
            theme:          theme
        }),
        Timeline.createHotZoneBandInfo({
            width:          "10%", 
            intervalUnit:   Timeline.DateTime.MONTH, 
            intervalPixels: 30,
            zones:          zones2, 
            eventSource:    eventSource,
            date:           date, 
            timeZone:       -6,
            overview:       true,
            theme:          theme
        })
    ];

    // bandInfos[0].highlight = true;
    bandInfos[1].syncWith = 0;
    bandInfos[1].highlight = true;
    
	// decorators
    for (var i = 0; i < bandInfos.length; i++) {
        bandInfos[i].decorators = [
		
            new Timeline.SpanHighlightDecorator({
                startDate:  "Fri April 16 2009 00:00:00 GMT-0600",
                endDate:    "Fri April 21 2009 23:59:59 GMT-0600",
                color:      "#FFC080", // set color explicitly
                opacity:    30,
                startLabel: "start OD+7 (April 16th)",
                endLabel:   "",
                theme:      theme
            }),
            new Timeline.SpanHighlightDecorator({
                startDate:  "Fri April 22 2009 00:00:00 GMT-0600",
                endDate:    "Fri April 22 2009 23:59:59 GMT-0600",
                color:      "#FFC080", // set color explicitly
                opacity:    50,
                startLabel: "start OD+1 (April 22nd)",
                endLabel:   "",
                theme:      theme
            }),
            new Timeline.SpanHighlightDecorator({
                startDate:  "Fri April 23 2009 00:00:00 GMT-0600",
                endDate:    "Fri April 23 2009 23:59:59 GMT-0600",
                color:      "#FFC080", // set color explicitly
                opacity:    50,
                startLabel: "start OD (April 23rd)",
                endLabel:   "end OD",
                theme:      theme
            }),
            new Timeline.PointHighlightDecorator({
                date:       "Fri April 16 2009 00:00:00 GMT-0600",
                opacity:    30,
                theme:      theme
                // use the color from the css file
            }),
            new Timeline.PointHighlightDecorator({
                date:       "Fri April 22 2009 00:00:00 GMT-0600",
                opacity:    50,
                theme:      theme
                // use the color from the css file
            }),
            new Timeline.PointHighlightDecorator({
                date:       "Sun April 23 2009 00:00:00 GMT-0600",
                opacity:    50,
                theme:      theme
                // use the color from the css file
            }),
            new Timeline.PointHighlightDecorator({
                date:       "Sun April 24 2009 00:00:00 GMT-0600",
                opacity:    50,
                theme:      theme
                // use the color from the css file
            })
        ];
    }
    
    tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
    //tl.loadXML("jfk.xml", function(xml, url) { eventSource.loadXML(xml, url); });
    tl.loadJSON("./timelinedata/sptimeline.js", function(data, url) { eventSource.loadJSON(data, url); });
    
    setupFilterHighlightControls(document.getElementById("controls"), tl, [0,1], theme);
}

var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}